<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         *{margin:0;padding: 0;}
		.fl{
			float:left;
		}
		.clearfix:after{
			content:".";
			height: 0;
			display:block;
			clear:both;
			visibility: hidden;
		}
		.banner{
			width: 3950px;
			position:absolute;
			top:0;
			left:0px;
		}
		.box{
			width: 790px;
			margin:0 auto;
			height: 340px;
			overflow:hidden;
			position:relative;
		}
		.banner{list-style:none;}
		.dots{
			position:absolute;
			left:50%;
			bottom:30px;
			list-style:none;
			margin-left: -72px;
		}
		.dots li{
			width:16px;
			height:16px;
			border-radius:50%;
			background:#fff;
			float:left;
			margin:0 10px;
		}
		.btns .left,.btns .right{
			position:absolute;
			width:60px;
			height:100px;
			text-align:center;
			font-size:50px;
			line-height:100px;
			top:50%;
			margin-top:-50px;
			color:#fff;
			background:rgba(0,0,0,0.5);
			list-style:none;
		}
        .dots li.on{
            background: orange;
        }
		.btns .left{
			left:0;
		}
		.btns .right{
			right:0;
		}
    </style>
</head>
<body>
    <div class="box">
        <ul class="banner clearfix " id ="banner" style="left:0px">
            <li>
                <a href="###">
                    <img src="img/1.jpg" height="340" width="790" alt="" class="fl"></a>
            </li>
            <li><a href="###"><img src="img/2.jpg" height="340" width="790" alt="" class="fl"></a></li>
            <li><a href="###"><img src="img/3.jpg" height="340" width="790" alt="" class="fl"></a></li>
            <li><a href="###"><img src="img/4.jpg" height="340" width="790" alt="" class="fl"></a></li>
            <li>
            <a href="###">
            <img src="img/1.jpg" height="340" width="790" alt="" class="fl"></a>
            </li>
        </ul>
        <ul class="dots">
            <li  index="0" class="on"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>			
        </ul>
        <ul class="btns">
            <li class="left">&lt;</li>
            <li class="right">&gt;</li>
        </ul>
    </div>
        <script src="./js/jquery-1.12.4.js"></script>
        <script>
        (function($){
         $(function(){   
			var i=0;   //图片索引值
			var size = $(".banner li" ).size(); // 图片的个数

		// 鼠标附上去暂停事件
        $(".banner").hover(function(){
			clearInterval(t);
		}, function(){
			t=setInterval(function(){
				i++;
				autoplay();
			},3000);
		})

		// 鼠标附到小圆圈上切换事件
        $(".dots li").hover(function(){
			var index =$(this).index();
			i=index;
			$(".banner").stop().animate({left:-index*790},500);
			$(this).addClass("on").siblings().removeClass("on");
		})

		// 向右点击事件
        $(".btns .right").click(function(){
			i++;
			autoplay();
		})

		// 向左点击事件
        $(".btns .left").click(function(){
			i--;
			autoplay();
		})

		// 自动轮播
        var t = setTimeout(function(){
			i++;

			autoplay();
		},3000)

		// 移动
        function autoplay(){
		    if(i==size){ 
		//当索引值为li的个数时，ul瞬间为0，达到无缝轮播的效果，其索引值变为1
				$(".banner").css({left:0});
				i=1;
			}
			if(i==-1){   
		//当向左点击切换时，让其ul的left值为最后一张图片的位置，索引值为最后一张的索引值
				$(".banner").css({left:-(size-1)*790});
				i = size-2;
			}
			$(".banner").stop().animate({left:-i*790},1000,
			function(){
				var t = setTimeout(function(){
			    i++;
			autoplay();
		},3000)
			})
			if (i == size - 1) {
		// 再其小圆圈的第一个添加类名on，同胞类名为空，并移除类名on
                $(".dots li").eq(0).addClass("on").siblings().removeClass("on");
            } else {
                $(".dots li").eq(i).addClass("on").siblings().removeClass("on");
            }
		}	
    })
})(jQuery)
    </script>
    </body>
    </html>